葫芦的运维日志_cssjshtml_vue.js v-for 过滤并排序

浏览量 4517

2018/10/18 01:24

vue.js computed 利用逗号实现 vue.js 先排序再过滤，关键点在于:顺序不能为先过滤再排序。
<!--
# @Time    : 2018/10/18 上午12:03
# @Author  : BrownWang
# @Email   : 277215243@qq.com
# @File    : vue6.html
# @Software: PyCharm -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #app {
            color: #99ff22;
        }
    </style>
</head>
<body>
<div id="app">
   <h3> 原始数据 </h3>
    <ul>
        <template v-for="student in students">
            <li>学校:{{ student.school }}</li>
            <li>班级:{{ student.class }}</li>
            <li>姓名:{{ student.name }}</li>
        </template>
    </ul>
   <h3> vue.js 过滤并排序后的数据 </h3>
    <ul>
        <template v-for="student in sortedClasses,filterStudents">
            <li>学校:{{ student.school }}</li>
            <li>班级:{{ student.class }}</li>
            <li>姓名:{{ student.name }}</li>
        </template>
    </ul>
</div>
<script src="/static/js/vue.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            students: [
                {
                    name: '王梓',
                    school: '培华学院',
                    class: '4a061'
                },
                {
                    name: '墩墩',
                    school: '技术学院',
                    class: '2a0401'
                },
                {
                    name: 'iqos',
                    school: '千叶中学',
                    class: '3a0341'
                },
                {
                    name: 'macs',
                    school: '英才学院',
                    class: '3a03as02'
                }
            ]
        },
        computed: {
            filterStudents: function () {
                return this.students.filter(function (student) {
                    return student.school.match(/学院/);
                })
            },
            sortedClasses: function () {
                return this.students.sort(function (a, b) {
                    //class由长到短进行排序
                    return a.class.length < b.class.length;
                })
            }
        }

    })
</script>
</body>
</html>
葫芦的运维日志
打赏